<template>
  <div class="sou">
    <div class="top">
      <div>
        <div>
          <i class="el-icon-search"></i>
          <input
            type="text"
            v-model="wenben"
            placeholder="请输入搜索内容"
            @keyup.enter="sou"
          />
        </div>
        <i @click="$router.push({ name: 'Home' })" class="el-icon-close"></i>
      </div>
      <div>
        <span :class="{ xiahua: zt == '文章' }" @click="qinqiu('文章')"
          >文章</span
        >
        <span :class="{ xiahua: zt == '用户' }" @click="qinqiu('用户')"
          >用户</span
        >
      </div>
    </div>
    <div class="titl" v-if="zt == '文章'">
      <div
        v-show="school.length != 0"
        class="content"
        v-for="(value, index) in school"
        :key="index"
        @click="qie(value.id)"
      >
        <div class="cont_leftimg">
          <img :src="value.url" alt="" />
        </div>
        <div class="cont_righttxt">
          <div>
            <p>{{ value.title }}</p>
            <!-- <span>B站xia</span> -->
          </div>
          <div>
            <span class="el-icon-view">140</span>
            <span class="el-icon-chat-dot-round">22</span>
            <span
              @click="qiehuan(index)"
              :class="{ sc: value.state == 1 }"
              class="el-icon-star-off"
              >12</span
            >
          </div>
          <div>
            <img :src="value.imgurl" alt="" />
            <span>{{ value.username }}</span>
          </div>
        </div>
      </div>
      <div class="cent" v-if="school.length==0">
        <p>未找到相关文章</p>
      </div>
    </div>
    <div class="yonghu" v-if="zt == '用户'">
      <div
        id="he"
        class="content"
        v-for="(value, index) in school"
        :key="index"
        @click="que(value.id)"
      >
        <div id="he" class="cont_leftimg">
          <img
            style="width: 60px; height: 60px; border-radius: 50%"
            id="he"
            :src="value.imgurl"
            alt=""
          />
        </div>
        <div id="he" class="cont_righttxt">
          <div he>
            <p>{{ value.username }}</p>
            <!-- <span>B站xia</span> -->
          </div>
        </div>
      </div>
       <div class="cent" v-if="school.length==0">
        <p>用户不存在</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sousuo",
  data() {
    return {
      zt: "文章",
      school: [],
      wenben: this.$store.state.text,
    };
  },
  methods: {
    qinqiu(value) {
      this.zt = value;
      if (this.wenben != "") {
        this.ajax({
          method: "post",
          url: "/queryData",
          data: {
            title: this.wenben,
            zt: this.zt,
          },
        }).then((res) => {
          this.school = res.data.data;
          // console.log(this.school);
        });
      } else {
        return;
      }
    },
    qiehuan(index) {
      this.school[index].state = !this.school[index].state;
      this.ajax({
        method: "post",
        url: "/updateSta",
        data: {
          id: this.school[index].id,
          state: this.school[index].state,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    sou() {
      this.$store.commit("gai", this.wenben);
      if (this.wenben != "") {
        this.ajax({
          method: "post",
          url: "/queryData",
          data: {
            title: this.wenben,
            zt: this.zt,
          },
        }).then((res) => {
          this.school = res.data.data;
          // console.log(this.school);
        });
      } else {
        return alert("搜索内容不能为空");
      }
    },
    que(value) {
      this.$store.commit("gaiid", value);
      this.$router.push({ name: "Geren" });
    },
    qie(value) {
      this.$store.commit("gaiid", value);
      this.$router.push({ name: "Mudidi" });
    },
  },
  mounted() {
    // this.wenben=this.$store.state.text;
    // this.$store.state.text='%'+this.$store.state.text+"%";
    // console.log(this.$store.state.text);
    if (this.$store.state.text != "") {
      this.ajax({
        method: "post",
        url: "/queryData",
        data: {
          title: this.$store.state.text,
          zt: this.zt,
        },
      }).then((res) => {
        this.school = res.data.data;
        // console.log(this.school);
      });
    } else {
      return;
    }
  },
};
</script>
<style lang="scss" scoped>
@import "./Sousuo.scss";
</style>